
Ext.define("Trebuchet.view.Home", {
	extend: 'Ext.Panel',
    xtype: 'homeview',
    requires: [ 
		
	],
	config:{

	    autoScroll:true,
	    items:[
	    	//header
	    	{
	    		xtype:'container',
	    		html: [
	'<div id="Wrapper">',
	'<!-- Login & Registration -->',
	'<section id="Action">',
		'<div id="Login">',
           		
			'<div>',
				'<label for="txtEmail">Email:</label>',
				'<input type="text" id="txtEmail"/>',
			'</div>',
			'<div>',
				'<label for="txtPassword">Password:</label>',
				'<input type="text" id="txtPassword" TextMode="Password"/>',
			'</div>',
			'<div>',
				'<div class="fb-login-button" scope="email">Login with Facebook</div>',
				'<input type="submit" id="cmdLogin" cssclass="zing alt" Text="Login" onClick="app.getController(\'Main\').Login()";/>',
      			'</div>',
			'<div class="sm">',
				'<a href="">Forgot password?</a>',
			'</div>',
		'</div>',
		
		'<div id="Register">',
			'<h2>Join Up!</h2>',
			'<div>',
				'<label for="txtRegisterEmail">Email:</label>',
				'<input type="text" id="txtRegisterEmail" />',
			'</div>',
			'<div>',
				'<label for="txtRegisterPassword">Password:</label>',
				'<input type="text" id="txtRegisterPassword" TextMode="Password"/>',
			'</div>',
			'<div>',
				'<label for="txtRegisterPasswordConfirm">Confirm Password:</label>',
				'<input type="text" id="txtRegisterPasswordConfirm" TextMode="Password"/>',
			'</div>',
			'<div>',
				'<input type="submit" id="cmdRegister" cssclass="zing alt" Text="Register"/>',
			'</div>',
		'</div>',
	'</section>',
	'<!-- / Login & Registration -->',

	'<!-- Promo Content -->',
	'<section id="Content">',
		'<div id="Promo">',
			'<h2>Build An Army.</h2>',
			'<h2>Destory Your Enemies.</h2>',
			'<h2>Conquer The World.</h2>',
			
			'<p>Trebuchet is an online, map-based strategy game. Sign up, choose your battleground, and challenge your friends or random opponents in a game of world domination.',
			'<br>',
			'<a class="zing" href="play.html">Get Started Now!</a>',
			'<br class="clear-left"></p>',
		'</div>',
		
	'<div class="spot left">',
			'<h3>Awesome Maps</h3>',
			'<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium pulvinar varius.</p>',
		'</div>',
		
		'<div class="spot right">',
			'<h3>Amazing Features</h3>',
			'<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium pulvinar varius.</p>',
		'</div>',
	'</section>',
	'<!-- / Promo Content -->',
	
	'<div class="clear"></div>'].join('')
	    		
	    		
	    	},
	    	

	    ]
	    
   },
   
    
});